<div>
    <el-row style="margin: 10px;">
        <el-col :span="15" style="padding-left: 10px;">
            <el-card>
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"
                         @submit.native.prevent>
                    <el-form-item label="引用模板" class="my-code-edit">
                        <el-input :id="path + 'link'" type="textarea" rows="6" :disabled="!isEdit" v-model="ruleForm.links" name="links"></el-input>
                    </el-form-item>
                    <el-form-item label="模板参数" class="mytable">
                        <el-table :data="tableData" border style="width: 100%;" :row-style="{height:10+'px'}"
                                  :cell-style="{padding:0+'px'}"
                                  :header-cell-style="{background:'#F5F7FA',color:'#606266', height:'8px', padding:'0px'}">
                            <el-table-column label="字段名" align="center" :render-header="addTooltip" min-width="46%">
                                <template slot-scope="scope">
                                    <el-input v-model="scope.row.field" :disabled="!scope.row.isNew"
                                              @dblclick.native="addNewRow(scope.$index)"
                                              @keyup.native="fieldKeyUp(scope.$index,$event)" placeholder="字段名"></el-input>
                                </template>
                            </el-table-column>

                            <el-table-column label="字段值" align="center" min-width="46%">
                                <template slot-scope="scope">
                                    <el-radio-group v-if="scope.row.isBool" v-model="scope.row.value">
                                        <el-radio label="true" name="isBool" >true</el-radio>
                                        <el-radio label="false" name="isBool">false</el-radio>
                                    </el-radio-group>
                                    <el-input v-else  v-model="scope.row.value" placeholder="字段值"></el-input>

                                </template>
                            </el-table-column>

                            <el-table-column label="布尔？" align="center" min-width="12%">
                                <template slot-scope="scope">
                                    <el-checkbox-group v-model="scope.row.isBool">
                                        <el-checkbox ></el-checkbox>
                                    </el-checkbox-group>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-form-item>
                    <el-form-item label="变量操作区" class="my-code-edit">
                        <el-input  :id="path + 'jsCode'" type="textarea"  rows="6" name="jsCode"></el-input>
                    </el-form-item>

                    <el-form-item label="代码区" class="my-code-edit">
                        <el-input :id="path + 'code'" type="textarea" :disabled="!isEdit" rows="10" v-model="ruleForm.templateCode" name="templateCode"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" v-if="!isEdit" @click="edit">启用编辑</el-button>
                        <el-button type="primary" v-if="isEdit" @click="compileScript">编译</el-button>
                        <el-button type="primary" v-if="isEdit" @click="save">保存</el-button>
                        <el-button type="primary" v-if="!isEdit" @click="run">运行</el-button>
                        <el-button @click="resetForm()">重置</el-button>
                    </el-form-item>
                </el-form>
            </el-card>
        </el-col>
        <el-col :span="9">
            <el-card>
                控制台输出
                <el-input type="textarea" readonly rows="30" v-model="resp"></el-input>
            </el-card>
        </el-col>
    </el-row>
</div>